<template>
  <div>
    <div class="ActicleCard_content" @click="goInfo(item._id)" v-for="item in CardTitleInfo" :key="item._id">
      <div class="ActicleCard_content_top">
        <div class="top_title">
          <span>{{item.title}}</span>
        </div>
      </div>
       <div class="ActicleCard_content_bottom">
         <div class="bottom_left_time_icon">
           <span class="iconfont icon-UIsheji_menjinxitong-15"></span><span>{{item.time|fileterDate}}</span>
         </div>
         <div class="right_lable">
           <span class="iconfont icon-biaoqian"></span><span class="lable_title">{{item.lable}}</span>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import 'highlight.js/styles/dark.css' //样式文件
export default {
  props: ['CardTitleInfo'],
  methods: {
    goInfo (id) {
      console.log(id);
      this.$router.push({
        name: 'articleinfo',
        query: {
          _id: id
        }
      })
    }
  },
  filters: {
    fileterDate: function (date) {
      var json_date = new Date(date).toJSON();
      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  },
}
</script>

<style lang="less">
.ActicleCard_content {
  padding: 20px;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(233, 233, 233, 0.8);
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;

  @media screen and (max-width: 600px) {
    width: 80%;
  }
  .ActicleCard_content_top {
    .top_title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      @media screen and (max-width: 600px) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      span {
        font-weight: 500;
        font-size: 20px;
        color: #5e5e5e;
        cursor: pointer;
      }
    }
  }

  .ActicleCard_content_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    .bottom_left_time_icon {
      .iconfont.icon-UIsheji_menjinxitong-15 {
      }

      span {
      }
    }

    .right_lable {
      .iconfont.icon-biaoqian {
      }

      span {
      }
      .lable_title {
        padding: 5px;
        background-color: rgba(207, 238, 207, 0.8);
        border-radius: 30px;
        font-size: 12px;
        color: rgb(180, 180, 180);
        cursor: pointer;
      }
    }
  }
}
</style>